<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Animation Test Suite</title>

<link type="text/css" rel="stylesheet" href="../../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="../../../build/yuitest/assets/testlogger.css">     

<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../../build/event/event.js"></script>
<script type="text/javascript" src="../../../build/dom/dom.js"></script> 
<script type="text/javascript" src="../../../build/animation/animation.js"></script> 
<script type="text/javascript" src="../../../build/logger/logger-min.js"></script>
<script type="text/javascript" src="../../../build/yuitest/yuitest.js"></script>

<style type="text/css">
#foo,
#bar {
    background:#ccc;
    height:100px;
    width:100px;
    overflow:hidden;
}
</style>

<script type="text/javascript">
(function() {
    var Y = YAHOO.util,
        tool = YAHOO.tool,
        suite = new tool.TestSuite("yuisuite");

    Y.Event.onDOMReady(function() {
        var logger = new YAHOO.tool.TestLogger(null, { height: '80%' });

        var animFoo = new Y.Anim('foo', { width: { to: 10 } });
        var elFoo = document.getElementById('foo');

        var animBar = new Y.Motion('bar', { width: { by: 50 } });
        var elBar = document.getElementById('bar');


        suite.add( new tool.TestCase({
            name: 'YAHOO.util.Anim',

            test_getEl: function() {
                YAHOO.util.Assert.areEqual(elFoo, animFoo.getEl(), 'incorrect element');
            },            

            test_isAnimated: function() {
                YAHOO.util.Assert.isFalse(animFoo.isAnimated(), 'isAnimated() should be false');
                animFoo.animate();

                YAHOO.util.Assert.isTrue(animFoo.isAnimated(), 'isAnimated() should be true');
                animFoo.stop();
            },            

            test_stop: function() {
                animFoo.animate();
                animBar.animate();
                animFoo.stop();
                YAHOO.util.Assert.isFalse(animFoo.isAnimated(), 'isAnimated() should be false');
                YAHOO.util.Assert.isTrue(animBar.isAnimated(), 'isAnimated() should be false');
                animBar.stop();
            },            

            test_onStart: function() {
                var pass = false;
                var handler = function() {
                    pass = true;
                    this.onStart.unsubscribe(handler);
                };      
                animFoo.onStart.subscribe(handler);
                animFoo.animate();
                animFoo.stop();
                YAHOO.util.Assert.isTrue(pass, 'onStart failed to fire');
            },            

            test_endValue: function() {
                var handler = function() {
                    YAHOO.util.Assert.areEqual(10, elFoo.offsetWidth, 'incorrect "to" end value set');
                    YAHOO.util.Assert.areEqual(150, elBar.offsetWidth, 'incorrect "by" end value set');
                    this.onComplete.unsubscribe(handler);
                };      

                animBar.onComplete.subscribe(handler);
                animFoo.animate();
                animBar.animate();
            }            
        })); 
        tool.TestRunner.add(suite);

        if (parent && parent != window) {
            tool.TestManager.load();
        } else {
            tool.TestRunner.run();
        }

    }); 
})();
</script>
<style type="text/css">

</style>
</head>
<body class="yui-skin-sam">
    <div id="doc">
        <div id="foo">foo</div>
        <div id="bar">bar</div>
    </div>
</body>
</html>
